<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner.list" :key="item.id">
        <van-image height="46vw" fit="cover" :src="item.image" @click="viewDetail(item)" />
      </van-swipe-item>
    </van-swipe>
    <notice></notice>
    <rank></rank>
    <menu-pic></menu-pic>
    <markets></markets>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
import { mapState, mapActions } from 'vuex'
import notice from './components/notice'
import rank from './components/rank'
import menuPic from './components/menuPic'
import markets from './components/markets'

export default {
  layout: 'navigation',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    notice,
    rank,
    menuPic,
    markets
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      banner: index => index.banner
    })
  },
  mounted() {
    this.getBanner()
  },
  methods: {
    ...mapActions({
      getBanner: 'getBanner'
    }),
    viewDetail(item) {
      this.$router.push({
        name: 'common-article',
        params: {
          url: item.url,
          title: item.title
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.my-swipe {
  height: 46vw;
}
.van-swipe-item {
  font-size: 0;
}
</style>
